<template>
  <header>
    <router-link class="header-logo" to="/"></router-link>
    <div class="header-button">
      <div class="button">
        <span @click="clickMy">我的</span>
      </div>
      <div class="button">
        <span @click="clickSearch">发现</span>
      </div>
    </div>
    <Search></Search>
    <div class="header-button header-button-right">
      <div class="button">
        <router-link to="/home">
          <icon-application-menu theme="two-tone" size="0.12rem" :fill="['#333', '#5fc5ba']" />
        </router-link>
      </div>
      <div class="button">
        <router-link to="/home">
          <icon-remind theme="two-tone" size="0.12rem" :fill="['#333', '#5fc5ba']" />
        </router-link>
      </div>
    </div>

    <div class="header-right">
      <div v-if="!isLogin" class="header-button">
        <div class="button login">
          <span @click="onClickToLogin">
            <span>登录/</span>
            <span>注册</span>
          </span>
        </div>
      </div>
      <el-dropdown v-if="isLogin" @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar size="default" :src="circleUrl" />
          <el-icon class="el-icon--right">
            <arrow-down style="width: 0.15rem; height: auto" />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <span @click="$router.push('/user_center')">
                <icon-user theme="outline" size="0.15rem" fill="#333" />
                个人中心
              </span>
            </el-dropdown-item>
            <el-dropdown-item>
              <icon-folder-focus theme="outline" size="0.15rem" fill="#333" />
              收藏夹
            </el-dropdown-item>
            <el-dropdown-item divided command="logout">
              <icon-logout theme="outline" size="0.15rem" fill="#333" />
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 登录注册的dialog -->
    <el-dialog v-model="dialogLoginVisible" title="Shipping address">
      <login-register />
    </el-dialog>


  </header>
</template>

<script setup lang="ts">
import LoginRegister from "@/views/portal/LoginRegister.vue"
import Search from "@/components/Home/Search.vue";
import { ref, getCurrentInstance, onMounted } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { post } from "@/tools/api/api"
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { debounce } from "@/hooks/tools";
import { usePhotoStore } from "@/store/photo";
// 引入仓库
const photoStore = usePhotoStore()
// 引入路由
const router = useRouter();
// 创建实例
const instance = getCurrentInstance();

onMounted(() => {
})

// 关闭登录注册dialog
instance?.proxy?.$Bus.on("closeDialog", () => {
  dialogLoginVisible.value = false;
})

/**
 * tab相关
 */
//点击  我的
const clickMy = () => {
  setTimeout(() => {
    instance?.proxy?.$Bus.emit("onClickTab", false)
  }, 10);
  router.push('/home')
  photoStore.$patch((state) => {
    state.isSearchTab = false;
  })

}
//点击   发现
const clickSearch = () => {
  setTimeout(() => {
    instance?.proxy?.$Bus.emit("onClickTab", true)
  }, 10);
  router.push('/home')
  photoStore.$patch((state) => {
    state.isSearchTab = true;
  })
}


// 头像
const circleUrl = ref(
  "https://img2.woyaogexing.com/2022/07/09/5ad8b0a6962a1989!400x400.jpg"
);

// 下拉框点击事件
const handleCommand = (command: string) => {
  // 退出登录
  if (command === "logout") {
    post("userLogout").then((res: any) => {
      // console.log(res)value
      if (res.code === 100) {
        localStorage.removeItem('token')
        router.push('/')
        ElMessage.success("成功退出登录！")
        photoStore.$patch((state) => {
          state.isLogin = false;
        })
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}

/**
 * 登录注册相关
 */
//判断是否登录
const isLogin = ref(localStorage.getItem("token"));
// 登录注册dialog
const dialogLoginVisible = ref<boolean>(false);
//接收其它组件的登录请求
instance?.proxy?.$Bus.on("showLoginDialog", () => {
  dialogLoginVisible.value = true;
})
const onClickToLogin = () => {
  dialogLoginVisible.value = true;
}





</script>

<style lang="scss" scoped>
$header-height: 0.3rem;
$logo-width: 0.6rem;
$a-font-size: 0.08rem;
$theme-color: rgb(96, 197, 186); //#5fc5ba

a {
  text-decoration: none;
}

span {
  cursor: pointer;
  color: $theme-color;
}

svg path:first-child {
  color: $theme-color;
}


header {
  background-position: bottom;
  background-repeat: repeat no-repeat;
  background-size: auto cover;
  position: fixed;
  border: 0.1rem;
  border-radius: 0.1rem;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $a-font-size;

  .header-right {
    display: flex;
    height: $header-height;

    .el-dropdown-link {
      height: 100%;
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;

      .el-icon--right {
        display: flex;
        align-items: center;
      }
    }

    .login {
      width: $logo-width*0.6;
    }
  }

  .header-logo {
    background-image: url("@/assets/logo/logo.png");
    display: inline-block;
    width: $logo-width;
    height: $header-height;
    line-height: $logo-width;
    margin: 0 0.1rem;
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: top;
    background-position: center center;
  }



  .collect {
    width: $logo-width * 2.8;
    height: $header-height * 0.6;
    display: flex;
    align-items: center;
    border-radius: 0.2rem;
  }



  .header-button {
    width: $logo-width;
    height: $header-height;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .button {
      color: black;
      transition: color 0.25s;
      width: $logo-width*1.4;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: $a-font-size;
        font-weight: bold;
      }

      &:hover {
        text-decoration: none;
        color: #9da3b4;
        border-bottom: $theme-color 2px solid;
      }
    }
  }
}


@media screen and (max-width:1024px) {
  header {
    height: $header-height*3;
    width: 100%;

    .header-logo {
      width: $logo-width*1.2;
    }

    .header-button {
      width: $logo-width*1.5;
    }

    .collect {
      width: $logo-width*3.6;
    }


    .header-button-right {
      display: none;
    }

    .header-right {
      height: $header-height*2;
    }
  }
}

@media screen and(max-width:600px) {
  header {
    height: $header-height*5;
    width: 100%;

    .header-logo {
      width: $logo-width*2;
      height: $header-height*2;
      float: right;
    }

    .header-button {
      width: $logo-width*3;
    }

    .collect {
      display: none;
    }


    .header-button-right {
      display: none;
    }

    .header-right {
      float: left;
      height: $header-height*2;
      font-size: $a-font-size*0.5;
    }

  }
}
</style>
